<style rel="stylesheet/scss" lang="scss" scoped>
	.box-flex{
		display: flex;
		margin-bottom: 20px;
		.sp{
			margin-left: 10px;
		}
		.flex-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			>span{
				margin-left: 10px;
			}
			>div{
				margin: 20px 0;
				margin-left: 50px;
			}
		}
	}
	.w-span{
		min-width: 100px;
		line-height: 40px;
		display: inline-block;
	}
	.role-input{
		width: 16px;
		height: 16px;
		vertical-align: middle;
		display: inline-block;
		margin-top: -3px;
	}
</style>
<template>
	<div v-if="flag">
		
		<el-row class=" box-flex">
			<el-col :span="6" class="box-flex m-l-10">
				<span class="w-span">角色名称</span>
				<el-input placeholder="单行输入" clearable  v-model="roleName" maxLength="20"></el-input>
			</el-col>
		</el-row>
		<el-row class="box-flex">
			<span class="sp">权限描述</span>
			<div class="flex-box">
				<div v-for='(menu, index) in menuList'>
					 <input  class="role-input" @change.stop.prevent="selectRole(menu,index)" :id="'checkbox'+index" :label="menu.url" type="checkbox">
					 {{menu.priorityName}}
					<div  style='width:600px;height:auto;margin-left:30px;margin-top: 5px;' >
						<div style="width:200px;display:inline-block" v-for='(f, childIndex) in menu.children' >
							<input 
								v-model="f.select"  
								:label="f.priorityName"  
								@change.stop.prevent="selectChild(index,childIndex)" 
								type="checkbox" 
								class="role-input"
								:id="'checkbox'+index+childIndex"/>
							{{f.priorityName}}
						</div>
					</div>
				</div>
			</div>
		</el-row>
		<el-row class="box-flex">
			<el-button type="primary" @click="submitRole">保存</el-button>
		</el-row>
	</div>
</template>
<script>
	import { mapMutations,mapGetters } from 'vuex'
	import { DEFAUL_INDEX, SUCCESS_REQUEST_STATUS } from '@/utils/config.js'
	export default {
		props: {
			roleItem: {
				type: [Object],
				required: false,
				default: {}
			}
		},
		data() {
			return {
				menuList: [],
				functionMap: {},
				flag: false,
				roleName: '',
				checkFunctionList: {},
			}
		},
		created() {
			setTimeout(() => {
				this._initInfo()
			},200)
			this.menuList = sessionStorage.getItem('menu') ? JSON.parse(sessionStorage.getItem('menu')) : []
			this.functionMap = sessionStorage.getItem('functionMap') ? JSON.parse(sessionStorage.getItem('functionMap')) : {}
		},
		methods: {
			// 保存数据
			submitRole() {
				let attr = !this.roleName ? '请填写角色名称':  ''
				let flag = false
				// !this.menuList.filter((item) => { return !item.select }).length ? '请选择权限配置':
				this.menuList.forEach((item) => {
					item.children.forEach((cel) => {
						if(cel.select) {
							flag = true
							return
						}
					})
				})
				if(!flag) attr = '请选择权限配置'
				if(attr) {
					this.$message({
					  message: attr,
					  type: 'warning'
					});
					return
				}
				let menu = []
				let selectList = this.menuList
				if(selectList && selectList.length > 0) {
					selectList.forEach((element) => {
						element.children.forEach((child) => {
							if(child.select){
								menu.push(child)
							}
						})
					})
				}
				this.roleItem.id ? this.putRoleData(menu) : this.saveRoleData(menu)
			},
			saveRoleData(menu) {
				
				this.$post({
					url: 'auth/role/', 
					data: {
						id: '',
						priority: menu,
						roleName: this.roleName
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$message({
								message: '操作成功',
								type: 'success'
							})
							this.$emit('refresh')
							this.setTabCurrentIndex(2)
						}
					}
				})
			},
			putRoleData(menu) {
				
				this.$put({
					url: 'auth/role/',
					data: {
						id: this.roleItem.id,
						priority: menu,
						roleName: this.roleName
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.$message({
								message: '更新成功成功',
								type: 'success'
							})
							this.$emit('refresh')
							this.setTabCurrentIndex(2)
						}
					}
				})
			},
			/**
			 * @desc 设置父级选中
			 */
			selectRole(item, index) {
				
				let se = document.getElementById("checkbox"+index).checked　
				item.children.forEach((child, childIndex) => {
					let preCheck = document.getElementById("checkbox"+index+childIndex)
						preCheck.checked = se
						child.select = se
				})
			},
			/**
			* @desc 设置子选中
			*/
			selectChild(preIndex, childIndex) {
				
				let childSelectLength = 0
				let preCheck = document.getElementById("checkbox"+preIndex)
				childSelectLength = this.menuList[preIndex].children.filter((item) => { return item.select}).length
				preCheck.checked = childSelectLength == this.menuList[preIndex].children.length ? true : false 
				this.menuList[preIndex].select  =  preCheck.checked 
				
			},
			_initInfo() {
				
				var checkFunctionList = {}
				this.flag = true
				this.roleName = this.roleItem.roleName
				if(this.roleItem) {
						console.log(this.menuList)
						this.menuList.forEach((item, index) => {
							item.children.forEach((child, childIndex) => {
								this.roleItem.priority.forEach((clement) => {
									if(clement.id == child.id) {
										child.select = true
										setTimeout(() => {
											let preCheck = document.getElementById("checkbox"+index+childIndex)
											preCheck.checked = true
										},100)
									}
								})
							})
							setTimeout(() => {
									let check = document.getElementById("checkbox"+index)
									let childSelectLength = this.menuList[index].children.filter((item) => { return item.select}).length
									check.checked = childSelectLength == this.menuList[index].children.length ? true : false 
									item.select = this.menuList[index].children.length ? true : false 
							},100)
						})
				}
				this.flag = true
			},
			...mapMutations({
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		computed: {
			...mapGetters([
				'secondDirectory',
				'merchantInfo'
			])
		}
	}
</script>
